<template>
  <div class="mainDiv">
    <!-- 卡片统计 -->
    <el-row type="flex" justify="center" :gutter="10">
      <el-col :span="8">
        <el-card class="index-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card_text">人员</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >详情</el-button
            >
          </div>
          <el-row type="flex" justify="space-around">
            <el-col :span="6"><p class="index_p">男性</p></el-col>
            <el-col :span="6"><p  class="index_p">{{num}}</p></el-col>
          </el-row>
          <el-row type="flex" justify="space-around">
            <el-col :span="6"><p class="index_p">女性</p></el-col>
            <el-col :span="6"><p  class="index_p">23</p></el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="8">    <el-card class="index-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card_text">会员</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >详情</el-button
            >
          </div>
          <el-row type="flex" justify="space-around">
            <el-col :span="6"><p class="index_p">单位会员</p></el-col>
            <el-col :span="6"><p  class="index_p">{{num}}</p></el-col>
          </el-row>

          <el-row type="flex" justify="space-around">
            <el-col :span="6"><p class="index_p">团体会员</p></el-col>
            <el-col :span="6"><p  class="index_p">23</p></el-col>
          </el-row>
        </el-card> </el-col>
      <el-col :span="8">     <el-card class="index-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card_text">费用</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >详情</el-button
            >
          </div>
          <el-row type="flex" justify="space-around">
            <el-col :span="6"><p class="index_p">会员单位</p></el-col>
            <el-col :span="6"><p  class="index_p">{{num}}</p></el-col>
          </el-row>
          <el-row type="flex" justify="space-around">
            <el-col :span="6"><p class="index_p">会员团体</p></el-col>
            <el-col :span="6"><p  class="index_p">23</p></el-col>
          </el-row>
        </el-card> </el-col>
    </el-row>

    <!-- 图表统计 -->

  </div>
</template>

<script>
export default {
  data() {
    return{
      adminIndexFunction: [],
      num:100
    }
  },
  methods: {



  },
  mounted() {


  },

};
</script>

<style lang="scss" scoped>
.index-card {
  margin: 7%;
  border-radius: 10px;
}
.card_text {
  // margin-left: 13%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;

}
.index_p{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 100;

}
</style>
